<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>List</title>
</head>
<body>
<h2>查询所有</h2>
<table id="app" border="1">
    <tr align="center">
        <td colspan="4">员工信息</td>
    </tr>
    <tr>
        <td>名称</td>
        <td>手机</td>
        <td>性别</td>
        <td>操作(<a th:href="@{/toAdd}">新增</a>)</td>
    </tr>
    <tr th:each="emp : ${employees}">
        <td th:text="${emp.name}"></td>
        <td th:text="${emp.phone}"></td>
        <td th:text="${emp.gender}"></td>
        <td>
            <a @click="handleDelete" th:href="@{'/employee/' + ${emp.id}}" >删除</a>
            <a th:href="@{'/employee/' + ${emp.id}}" >更新</a>
        </td>
    </tr>
</table>

<form id="form" method="post">
    <input type="hidden" name="_method" value="delete">
</form>
<script th:src="@{/static/js/vue.js}"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            handleDelete(e) {
                var form = document.getElementById('form');
                form.action = e.target.href;
                form.submit();
                e.preventDefault();
            }
        }
    })
</script>
</body>
</html>